<template>
    <div>
        <!--这个div用于实现回到顶部的功能-->
        <div id="back-top" v-if="showBackTop" @click="doBackTop">
            <i class="el-icon-arrow-up"></i>
        </div>
        <chaosHeader :isHome="true"></chaosHeader>
        <chaosMiddle></chaosMiddle>
        <chaosBottom></chaosBottom>
    </div>
</template>

<script>

    import chaosHeader from '@/components/chaosHeader'
    import chaosMiddle from '@/components/chaosMiddle'
    import chaosBottom from '@/components/chaosBottom'

    export default {
        name: 'LoginPage',
        components:{chaosHeader,chaosMiddle,chaosBottom},
        data () {
            return {
                showBackTop:false
            }
        },
        mounted(){
            //添加事件监听器，监听scrollToTop事件
            window.addEventListener('scroll', this.scrollToTop);
        },
        destroyed () {
            //移除事件监听器
            window.removeEventListener('scroll', this.scrollToTop);
        },

        methods: {
            //返回顶部方法
            doBackTop() {
                //这个逻辑网上找的，简单说就是修改系统属性，实现回到顶部的效果
                const self = this;
                let timer = setInterval(() => {
                    let ispeed = Math.floor(-self.scrollTop / 5);
                    document.documentElement.scrollTop = document.body.scrollTop = self.scrollTop + ispeed;
                    if (self.scrollTop === 0) {
                        clearInterval(timer);
                    }
                }, 16);
            },

            //这个方法用于控制显示/隐藏 回到顶部按钮模块
            scrollToTop() {
                const self = this;
                //通过逻辑判断获取浏览器的scrollTop属性，这种写法可以兼容所有浏览器
                let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
                self.scrollTop = scrollTop;
                //当高度大于475的时候显示按钮，高度小于475的时候隐藏按钮
                if (self.scrollTop > 475) {
                    self.showBackTop = true;
                } else {
                    self.showBackTop = false;
                }
            }
        }

    }
</script>

<style scoped>
    #back-top {
        position: fixed;
        width:50px;
        height:50px;
        background-color: rgba(0,0,0,.8);
        bottom:50px;
        border-radius:5px;
        line-height:50px;
        text-align:center;
        cursor:pointer;
        right:80px;
        font-size: 36px;
    }
</style>
